﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>c't Longitude</title>
  <link rel="stylesheet" href="css/ctlon.css" />
  <script type="text/javascript">
    var CTLON = { authenticated: false };
  </script>

  <!-- Login with Google -->
  <script type="text/javascript">
    (function () {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/client:plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

    function signinCallback(authResult) {
      if (authResult['status']['signed_in']) {
        document.getElementById('googleSigninButton').setAttribute('style', 'display: none');
        console.log(authResult);
        CTLON.authenticated = true;
      }
      else {
        // Possible error values:
        //   "user_signed_out" - User is signed-out
        //   "access_denied" - User denied access to your app
        //   "immediate_failed" - Could not automatically log in the user
        console.log('Google sign-in state: ' + authResult['error']);
      }
    }
  </script>

  <!-- Login with Facebook -->
  <script type="text/javascript">
    window.fbAsyncInit = function () {
      FB.init({
        appId: '1394587504123689',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML
      });

      function loginStatusChanged(response) {
        console.log(response);
        // Here we specify what we do with the response anytime this event occurs. 
        if (response.status === 'connected') {
          // The response object is returned with a status field that lets the app know the current
          // login status of the person. In this case, we're handling the situation where they 
          // have logged in to the app.
          console.log('Welcome to Facebook!');
          CTLON.authenticated = true;
          FB.api('/me', function (response) {
            console.log(response);
          });
        }
        else if (response.status === 'not_authorized') {
          // In this case, the person is logged into Facebook, but not into the app, so we call
          // FB.login() to prompt them to do so. 
          // In real-life usage, you wouldn't want to immediately prompt someone to login 
          // like this, for two reasons:
          // (1) JavaScript created popup windows are blocked by most browsers unless they 
          // result from direct interaction from people using the app (such as a mouse click)
          // (2) it is a bad experience to be continually prompted to login upon page load.
          FB.login();
        }
        else {
          // In this case, the person is not logged into Facebook, so we call the login() 
          // function to prompt them to do so. Note that at this stage there is no indication
          // of whether they are logged into the app. If they aren't then they'll see the Login
          // dialog right after they log in to Facebook. 
          // The same caveats as above apply to the FB.login() call here.
          FB.login();
        }
      }

      // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
      // for any authentication related change, such as login, logout or session refresh. This means that
      // whenever someone who was previously logged out tries to log in again, the correct case below 
      // will be handled. 
      FB.Event.subscribe('auth.authResponseChange', loginStatusChanged);

      // FB.getLoginStatus(loginStatusChanged, true);
    };

    // Load the SDK asynchronously
    (function (d) {
      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js";
      ref.parentNode.insertBefore(js, ref);
    }(document));
  </script>
</head>
<body class="login">
  <h1>c't Longitude</h1>

  <!-- Login with Google -->
  <span id="googleSigninButton">
    <span
      class="g-signin"
      data-callback="signinCallback"
      data-clientid="794079768346.apps.googleusercontent.com"
      data-cookiepolicy="single_host_origin"
      data-scope="https://www.googleapis.com/auth/plus.login"></span>
  </span>

  <!-- Login with Facebook -->
  <div id="fb-root"></div>
  <!-- Below we include the Login Button social plugin. This button uses the JavaScript SDK to present a graphical Login button that triggers the FB.login() function when clicked. -->
  <fb:login-button show-faces="false"></fb:login-button>

</body>
</html>
